<template>
  <div class="assess">
    <div class="assess_top">
      <div class="left">
        <p style="font-size: 30px; color: #ffcc00; font-weight: bold">5.0</p>
        <p style="font-size: 20px; line-height: 40px">综合评分</p>
        <p style="font-size: 14px; color: #aaa">高于周边商家96%</p>
      </div>
      <div class="right">
        <p>
          服务态度
          <van-rate
            v-model="serve"
            allow-half
            void-icon="star"
            gutter="5px"
            void-color="#eee"
            color="#ffd21e"
            :size="15"
          />
        </p>
        <p>
          菜品质量
          <van-rate
            v-model="dish"
            allow-half
            void-icon="star"
            gutter="5px"
            void-color="#eee"
            color="#ffd21e"
            :size="15"
          />
        </p>
        <p>送达时间 <span>20分钟</span></p>
      </div>
    </div>

    <div class="assess_bottom">
      <van-tabs type="card" color="#FFCC00" >
        <van-tab title="全部" class="taball">
          <img src="" alt="" style="width:50px;height:50px;margin-right:20px;border-radius:50%" />
          <div>
            <p style="display:flex;justify-content:space-between">
            <span>name</span> 
            <span style="color:#aaa">time</span>
            </p>
            <p>
            <van-rate v-model="user"  allow-half
              void-icon="star" gutter="5px"  void-color="#eee"
              color="#ffd21e" :size="15"
            />
            <span style="padding-left:20px;color:#aaa">30分钟送达</span>
            </p>
            <p style="line-height:40px">阿巴阿巴阿巴阿巴啊</p>
            <p style="display:flex">
                <van-icon name="good-job" color='#FFCC00' style="padding-right:10px"/> 
                <span>
                    <span style="border: 1px solid #aaa;padding:2px;margin-right:4px;color:#aaa">南瓜粥</span>
                    <span style="border: 1px solid #aaa;padding:2px;margin-right:4px;color:#aaa">南瓜粥</span>
                </span>
            </p>

          </div>
        </van-tab>
        <van-tab title="满意" class="taball">
         <img src="" alt="" style="width:50px;height:50px;margin-right:20px;border-radius:50%" />
          <div>
            <p style="display:flex;justify-content:space-between">
            <span>name</span> 
            <span style="color:#aaa">time</span>
            </p>
            <p>
            <van-rate v-model="user"  allow-half
              void-icon="star" gutter="5px"  void-color="#eee"
              color="#ffd21e" :size="15"
            />
            <span style="padding-left:20px;color:#aaa">30分钟送达</span>
            </p>
            <p style="line-height:40px">阿巴阿巴阿巴阿巴啊</p>
            <p style="display:flex">
                <van-icon name="good-job" color='#FFCC00' style="padding-right:10px"/> 
                <span>
                    <span style="border: 1px solid #aaa;padding:2px;margin-right:4px;color:#aaa">南瓜粥</span>
                </span>
            </p>

          </div>
        </van-tab>
        <van-tab title="不满意" class="taball">         
         <img src="" alt="" style="width:50px;height:50px;margin-right:20px;border-radius:50%" />
          <div>
            <p style="display:flex;justify-content:space-between">
            <span>name</span> 
            <span style="color:#aaa">time</span>
            </p>
            <p>
            <van-rate v-model="user"  allow-half
              void-icon="star" gutter="5px"  void-color="#eee"
              color="#ffd21e" :size="15"
            />
            <span style="padding-left:20px;color:#aaa">30分钟送达</span>
            </p>
            <p style="line-height:40px">阿巴阿巴阿巴阿巴啊</p>
            <p style="display:flex">
                <van-icon name="good-job" color='#FFCC00' style="padding-right:10px"/> 
                <span>
                    <span style="border: 1px solid #aaa;padding:2px;margin-right:4px;color:#aaa">皮蛋瘦肉粥</span>
                </span>
            </p>

          </div></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serve: 4.5,
      dish: 4.5,
      user:5,
    };
  },
};
</script>

<style lang="less" scoped>
.assess {
  .assess_top {
    display: flex;
    border-bottom: 20px solid #f2f2f2;

    .left {
      border-right: 1px solid #ccc;
      margin: 20px 20px 20px 0;
      padding: 0 20px;
      text-align: center;
    }
    .right {
      margin: 20px 0;
      line-height: 34px;
    }
  }
  .assess_bottom {
    padding-top: 20px;

    .taball{
        display: flex;
        padding:10px;
        border-bottom: 1px solid #f2f2f2
    }
  }
}
</style>